{extend name="official/layout" /}

{block name="style"}
<link rel="stylesheet" href="/assets/css/index.css">
{/block}

{block name="content"}
<!-- 轮播图 -->
{carefree:slider group='home' limit='10' id='slider' key='k' empty='<section class="hero-section"><div class="container"><div class="row align-items-center"><div class="col-lg-6 hero-content" data-aos="fade-right"><h1 class="hero-title">现代化内容管理系统</h1><p class="hero-subtitle">基于ThinkPHP8构建的企业级CMS解决方案，助力您的数字化转型</p><div class="hero-buttons"><a href="/admin" class="btn btn-light-custom">立即体验</a><a href="/features.html" class="btn btn-outline-light-custom">了解更多</a></div></div><div class="col-lg-6 text-center hero-image" data-aos="fade-left"><img src="/assets/images/placeholder/dashboard.svg" alt="CMS Dashboard"></div></div></div></section>'}
<section class="slider-section">
    <div id="mainSlider" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#mainSlider" data-bs-slide-to="{$k-1}" class="{$k == 1 ? 'active' : ''}" aria-current="{$k == 1 ? 'true' : 'false'}" aria-label="Slide {$k}"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item {$k == 1 ? 'active' : ''}">
                <img src="{$slider.image ?: '/assets/images/placeholder/slider.jpg'}" class="d-block w-100" alt="{$slider.title ?: ''}" style="max-height: 600px; object-fit: cover;">
                {if condition="$slider.title || $slider.description"}
                <div class="carousel-caption d-none d-md-block" style="background: rgba(0,0,0,0.5); padding: 20px; border-radius: 10px;">
                    {if condition="$slider.title"}
                    <h2>{$slider.title}</h2>
                    {/if}
                    {if condition="$slider.description"}
                    <p>{$slider.description}</p>
                    {/if}
                    {if condition="$slider.link"}
                    <a href="{$slider.link}" class="btn btn-light-custom">了解更多</a>
                    {/if}
                </div>
                {/if}
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#mainSlider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mainSlider" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>
{/carefree:slider}

<!-- 顶部广告 -->
{carefree:ad position='top' limit='3' id='ad' empty=''}
<section class="top-ads-section">
    <div class="container">
        <div class="row g-3">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{$i * 100}">
                {if condition="$ad.link"}
                <a href="{$ad.link}" target="_blank" class="top-ad-item" title="{$ad.title ?: ''}">
                    <img src="{$ad.image ?: '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?: ''}">
                </a>
                {else /}
                <div class="top-ad-item">
                    <img src="{$ad.image ?: '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?: ''}">
                </div>
                {/if}
            </div>
        </div>
    </div>
</section>
{/carefree:ad}

<!-- 核心特性 -->
<section class="features-section">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>核心特性</h2>
            <p>强大的功能，简洁的界面，助力您的内容管理</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-speedometer2"></i>
                    </div>
                    <h4>高性能</h4>
                    <p>基于ThinkPHP6框架，优化的数据库查询和缓存机制，确保系统高效运行</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <h4>安全可靠</h4>
                    <p>多层安全防护，RBAC权限管理，敏感词过滤，保障系统和内容安全</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-phone"></i>
                    </div>
                    <h4>响应式设计</h4>
                    <p>完美支持PC、平板、手机等各种设备，随时随地管理您的内容</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-palette"></i>
                    </div>
                    <h4>多模板支持</h4>
                    <p>灵活的模板系统，支持多套主题切换，轻松定制您的网站外观</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-diagram-3"></i>
                    </div>
                    <h4>版本管理</h4>
                    <p>完整的内容版本控制，支持版本对比和回滚，永不担心误操作</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-search"></i>
                    </div>
                    <h4>SEO优化</h4>
                    <p>内置SEO优化功能，自定义TDK，友好的URL结构，提升搜索引擎排名</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 统计数据 -->
{carefree:stats type='all' id='stat' empty=''}
<section class="stats-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-item">
                    <span class="stat-number" data-count="{$stat.user_count}">{$stat.user_count}</span>
                    <span class="stat-label">用户信赖</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-item">
                    <span class="stat-number" data-count="{$stat.article_count}">{$stat.article_count}</span>
                    <span class="stat-label">文章总数</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="stat-item">
                    <span class="stat-number" data-count="{$stat.comment_count}">{$stat.comment_count}</span>
                    <span class="stat-label">评论互动</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="400">
                <div class="stat-item">
                    <span class="stat-number" data-count="{$stat.view_count}">{$stat.view_count}</span>
                    <span class="stat-label">总访问量</span>
                </div>
            </div>
        </div>
    </div>
</section>
{/carefree:stats}

<!-- 热门内容区 -->
<section class="hot-content-section" style="background: #f8f9fa; padding: 80px 0;">
    <div class="container">
        <div class="row g-4">
            <!-- 最新文章 -->
            <div class="col-lg-8" data-aos="fade-right">
                <div class="content-box">
                    <div class="content-box-header">
                        <h3><i class="bi bi-newspaper"></i> 最新资讯</h3>
                        <a href="/articles.html" class="more-link">更多 <i class="bi bi-arrow-right"></i></a>
                    </div>
                    <div class="article-list">
                        {carefree:article limit='6' order='create_time desc' id='article' empty='<div class="empty-state"><p>暂无文章</p></div>'}
                        <div class="article-item" data-aos="fade-up" data-aos-delay="{$i * 50}">
                            {if condition="$article.cover_image"}
                            <a href="/article/{$article.id}.html" class="article-thumb">
                                <img src="{$article.cover_image}" alt="{$article.title}">
                            </a>
                            {/if}
                            <div class="article-info">
                                <h4><a href="/article/{$article.id}.html">{$article.title}</a></h4>
                                <p class="article-excerpt">{$article.description ?: mb_substr(strip_tags($article.content), 0, 100, 'utf-8') . '...'}</p>
                                <div class="article-meta">
                                    <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d'}</span>
                                    <span><i class="bi bi-eye"></i> {$article.view_count ?: 0}</span>
                                    <span><i class="bi bi-chat"></i> {$article.comment_count ?: 0}</span>
                                </div>
                            </div>
                        </div>
                        {/carefree:article}
                    </div>
                </div>
            </div>

            <!-- 侧边栏 -->
            <div class="col-lg-4" data-aos="fade-left">
                <!-- 热门文章排行 -->
                <div class="content-box mb-4">
                    <div class="content-box-header">
                        <h3><i class="bi bi-fire"></i> 热门排行</h3>
                    </div>
                    {carefree:rank type='view' limit='10' days='30' id='hot' empty='<div class="empty-state"><p>暂无数据</p></div>'}
                    <div class="rank-list">
                        <div class="rank-item">
                            <span class="rank-num rank-{$i <= 3 ? 'top' : 'normal'}">{$i}</span>
                            <a href="/article/{$hot.id}.html" class="rank-title" title="{$hot.title}">{$hot.title}</a>
                            <span class="rank-count">{$hot.view_count}</span>
                        </div>
                    </div>
                    {/carefree:rank}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 应用案例 -->
<section class="showcase-section">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>应用案例</h2>
            <p>众多企业和组织选择我们的解决方案</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="showcase-card">
                    <img src="/assets/images/placeholder/showcase-corporate.svg" alt="企业官网" class="showcase-image">
                    <div class="showcase-content">
                        <h4>企业官网</h4>
                        <p>为大型企业提供品牌展示和产品宣传平台，提升企业形象</p>
                        <span class="showcase-tag">企业门户</span>
                        <span class="showcase-tag">品牌展示</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="showcase-card">
                    <img src="/assets/images/placeholder/showcase-news.svg" alt="新闻门户" class="showcase-image">
                    <div class="showcase-content">
                        <h4>新闻门户</h4>
                        <p>专业的新闻发布和内容管理系统，支持多渠道分发</p>
                        <span class="showcase-tag">新闻媒体</span>
                        <span class="showcase-tag">内容分发</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="showcase-card">
                    <img src="/assets/images/placeholder/showcase-ecommerce.svg" alt="电商平台" class="showcase-image">
                    <div class="showcase-content">
                        <h4>电商平台</h4>
                        <p>灵活的产品管理和内容营销解决方案，助力电商业务增长</p>
                        <span class="showcase-tag">电子商务</span>
                        <span class="showcase-tag">营销推广</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 友情链接 -->
{carefree:link group='home' limit='12' id='link' empty=''}
<section class="links-section" style="background: #f8f9fa; padding: 60px 0;">
    <div class="container">
        <div class="section-title" data-aos="fade-up">
            <h2>友情链接</h2>
            <p>携手共进，共创未来</p>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-lg-2 col-md-3 col-sm-4 col-6 text-center" data-aos="fade-up" data-aos-delay="{$i * 50}">
                <a href="{$link.url ?: '#'}" target="_blank" class="link-item" title="{$link.title ?: ''}" rel="nofollow">
                    {if condition="$link.logo"}
                    <img src="{$link.logo}" alt="{$link.title}" class="link-logo">
                    {else /}
                    <div class="link-text">{$link.title ?: ''}</div>
                    {/if}
                </a>
            </div>
        </div>
    </div>
</section>
{/carefree:link}

<!-- CTA -->
<section class="cta-section">
    <div class="container" data-aos="fade-up">
        <h2>准备开始了吗？</h2>
        <p>立即体验强大的内容管理系统，开启数字化转型之旅</p>
        <a href="/admin" class="btn btn-light-custom btn-lg">免费试用</a>
        <a href="/contact.html" class="btn btn-outline-light-custom btn-lg ms-3">联系我们</a>
    </div>
</section>

<!-- 侧边广告（固定在右侧，仅在大屏幕显示） -->
{carefree:ad position='side' limit='5' id='ad' empty=''}
<div class="side-ads-container">
    {if condition="$ad.link"}
    <a href="{$ad.link}" target="_blank" class="side-ad-item" title="{$ad.title ?: ''}">
        <img src="{$ad.image ?: '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?: ''}">
    </a>
    {else /}
    <div class="side-ad-item">
        <img src="{$ad.image ?: '/assets/images/placeholder/ad.jpg'}" alt="{$ad.title ?: ''}">
    </div>
    {/if}
</div>
{/carefree:ad}
{/block}

{block name="script"}
<script src="/assets/js/index.js"></script>
{/block}
